 
// 创建弹窗对象的方法
class Popup {
  constructor(viewer) {
    this.viewer = viewer;//弹窗创建的viewer
    this.position = null;//弹窗挂载的位置
    this.offset = [0, 0];//弹窗偏移的位置
    this.ctn = document.createElement("div");
    this.ctn.style.position = "absolute";
    // 地球渲染改变弹窗位置事件监听
    this.eventListener = () => {
      const canvasPosition = this.viewer.scene.cartesianToCanvasCoordinates(this.position, new Cesium.Cartesian2()); // 笛卡尔坐标到画布坐标
      if (canvasPosition) {
        this.render(canvasPosition);
        // 地球背面隐藏
        const cameraPosition = this.viewer.camera.position;
        let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cameraPosition).height;
        height += this.viewer.scene.globe.ellipsoid.maximumRadius;
        if (!(Cesium.Cartesian3.distance(cameraPosition, this.position) > height)) {
          this.ctn.style.display = "block";
        } else {
          this.ctn.style.display = "none";
        }
      }
    }
  }
  open(options) {
    if(options.position instanceof Cesium.Cartesian3) {
      this.position = options.position;
    }else if(Array.isArray(options.position)) {
      this.position = Cesium.Cartesian3.fromDegrees(...options.position, 0);
    }
    this.offset = options.offset || [0, 0];
    this.createHtml(options.title, options.content, options.customDom, options.onClose);
    this.viewer.scene.preRender.addEventListener(this.eventListener);
  }
  render(position){
    this.ctn.style.left = position.x + this.offset[0] + "px";
    this.ctn.style.top = position.y - this.offset[1] + "px";
  }
  createHtml(title, content, customDom = false, callback){
    // 自定义内容，直接将dom放入容器中
    if(customDom) {
      this.ctn.style.width = 0;
      this.ctn.style.height = 0;
      if(typeof content === "string") {
        this.ctn.innerHTML = content;
      }else {
        this.ctn.appendChild(content);
      }
      this.viewer.container.appendChild(this.ctn);
      return;
    }
    // 添加cesium-popup样式
    let element = `<div id="popup" class="cesium-popup">
      <div class="popup-title">${title || ""}</div>
      <a href="javascript:void(0)" id="popup-closer" class="cesium-popup-closer"></a>
      <div class="popup-content"></div>
    </div>`;
    this.ctn.innerHTML = element;
    this.viewer.container.appendChild(this.ctn);
    let outContent = document.querySelector(".popup-content");
    if(typeof content === "string") {
      outContent.innerHTML = content;
    }else {
      outContent.appendChild(content);
    }
    document.querySelector("#popup-closer").addEventListener("click", evt => {
      this.close();
      if(callback) callback();
    });
  }
  close(){
    this.ctn.innerHTML = "";
    if(this.viewer.container.contains(this.ctn)) this.viewer.container.removeChild(this.ctn);
    this.viewer.scene.preRender.removeEventListener( this.eventListener );
  }
  show(visible) {
    if(visible) {
      this.ctn.style.display = "block";
      this.viewer.scene.preRender.addEventListener(this.eventListener);
    }else {
      this.ctn.style.display = "none";
      this.viewer.scene.preRender.removeEventListener( this.eventListener );
    }
  }
}
export default Popup;